import React from "react"
import GpContainer from "@/components/GpContainer"
import { View } from "@tarojs/components"
import GpMustReadItem from "@/components/GpMustReadItem"
import GpQAItem from "@/components/GpQAItem"
import GpPagination from "@/components/GpPagination"
import GpJumpNavs from "@/components/GpJumpNavs"
import GpCurrentPort from "@/components/GpCurrentPort"
import GpTabbar from "@/components/GpTabbar"
import { cloneDeep } from "@/utils/common"
import { getExamList, getQAList } from "@/apis/index"
import { pageMapper } from "@/constants/pageMap"
import { makePagePath } from "@/utils/router"
import GpEmpty from "@/components/GpEmpty"
import clsx from "clsx"
import { Loading } from "@taroify/core"
import GpTopHeader from "../components/GpTopHeader"
import styles from "./index.module.scss"

const ports = [{ text: "艺考动态" }]
type IFilter = IOption & { link: string }
type IFilterVal = 0 | 1 | 2 | 3
type IState = {
  curFilter: IFilterVal
  pagination_0: IPagination
  /** 艺考动态列表 */
  list_0: any[]
  /** 艺考问答 */
  pagination_1: IPagination
  list_1: any[]
  /** 培训指南 */
  pagination_2: IPagination
  list_2: any[]
  /** 艺考政策 */
  pagination_3: IPagination
  list_3: any[]
  pending: boolean
}
type IData = {
  keyword?: string
}
class Dynamic extends React.Component<unknown, IState> {
  extData: IData
  constructor(props) {
    super(props)
    this.state = {
      curFilter: 0,
      pagination_0: {
        page: 1,
        pageCount: 6
      },
      list_0: [],
      pagination_1: {
        page: 1,
        pageCount: 1
      },
      list_1: [],
      pagination_2: {
        page: 1,
        pageCount: 1
      },
      list_2: [],
      pagination_3: {
        page: 1,
        pageCount: 1
      },
      list_3: [],
      pending: false
    }
    this.extData = {}
  }
  onLoad(options: Recordable) {
    // query: { filter: 0|1|2|3}
    if (typeof options.filter !== "undefined") {
      this.setState(
        {
          curFilter: Number(options.filter) as IFilterVal
        },
        () => {
          this.searchData()
        }
      )
      return
    }
    this.searchData()
  }
  handlePageChange_3 = (page: number) => {
    const _pagination = cloneDeep(this.state.pagination_3)
    _pagination.page = page
    this.setState(
      {
        pagination_3: _pagination
      },
      () => {
        this.searchData_3(this.extData.keyword)
      }
    )
  }
  searchData_3 = (keyword?: string) => {
    this.showListLoading()
    this.extData.keyword = keyword
    const { pagination_3 } = this.state
    getExamList({
      pagination: {
        current: pagination_3.page,
        pageSize: 8
      },
      search: {
        keyword,
        columnId: 2
      }
    })
      .then(res => {
        if (res.data.success) {
          const retData = res.data.data
          this.setState({
            list_3: retData.list || [],
            pagination_3: {
              ...pagination_3,
              pageCount: retData.pagination.pageCount
            }
          })
        }
      })
      .finally(() => {
        this.hideListLoading()
      })
  }
  /** 列表 */
  renderList_3 = () => {
    const list = this.state.list_3
    const len = list.length
    return (
      <View className="mt-20px bg-hex-fff px-30px pt-24px pb-68px">
        <View className="flex flex-col">
          {/* item for loop */}
          {len > 0 ? (
            list.map((l, index) => (
              <GpMustReadItem
                key={l.id}
                mustReadItem={l}
                className={clsx({
                  "mb-48px": index !== len - 1
                })}
              />
            ))
          ) : (
            <GpEmpty />
          )}
        </View>
      </View>
    )
  }
  handlePageChange_2 = (page: number) => {
    const _pagination = cloneDeep(this.state.pagination_2)
    _pagination.page = page
    this.setState(
      {
        pagination_2: _pagination
      },
      () => {
        this.searchData_2(this.extData.keyword)
      }
    )
  }
  searchData_2 = (keyword?: string) => {
    this.showListLoading()
    this.extData.keyword = keyword
    const { pagination_2 } = this.state
    getExamList({
      pagination: {
        current: pagination_2.page,
        pageSize: 8
      },
      search: {
        keyword,
        columnId: 3
      }
    })
      .then(res => {
        if (res.data.success) {
          const retData = res.data.data
          this.setState({
            list_2: retData.list || [],
            pagination_2: {
              ...pagination_2,
              pageCount: retData.pagination.pageCount
            }
          })
        }
      })
      .finally(() => {
        this.hideListLoading()
      })
  }
  /** 列表 */
  renderList_2 = () => {
    const list = this.state.list_2
    const len = list.length
    return (
      <View className="mt-20px bg-hex-fff px-30px pt-24px pb-68px">
        <View className="flex flex-col">
          {/* item for loop */}
          {len > 0 ? (
            list.map((l, index) => (
              <GpMustReadItem
                key={l.id}
                mustReadItem={l}
                className={clsx({
                  "mb-48px": index !== len - 1
                })}
              />
            ))
          ) : (
            <GpEmpty />
          )}
        </View>
      </View>
    )
  }
  handlePageChange_0 = (page: number) => {
    const _pagination = cloneDeep(this.state.pagination_0)
    _pagination.page = page
    this.setState(
      {
        pagination_0: _pagination
      },
      () => {
        this.searchData_0(this.extData.keyword)
      }
    )
  }
  showListLoading = () => {
    this.setState({
      pending: true
    })
  }
  hideListLoading = () => {
    this.setState({
      pending: false
    })
  }
  searchData_0 = (keyword?: string) => {
    this.showListLoading()
    this.extData.keyword = keyword
    const { pagination_0 } = this.state
    getExamList({
      pagination: {
        current: pagination_0.page,
        pageSize: 8
      },
      search: {
        keyword,
        columnId: 1
      }
    })
      .then(res => {
        if (res.data.success) {
          const retData = res.data.data
          this.setState({
            list_0: retData.list || [],
            pagination_0: {
              ...pagination_0,
              pageCount: retData.pagination.pageCount
            }
          })
        }
      })
      .finally(() => {
        this.hideListLoading()
      })
  }
  searchData_1 = (keyword?: string) => {
    this.showListLoading()
    this.extData.keyword = keyword
    const { pagination_1 } = this.state
    getQAList({
      pagination: {
        current: pagination_1.page,
        pageSize: 8
      },
      search: {
        keyword
      }
    })
      .then(res => {
        if (res.data.success) {
          const retData = res.data.data
          const _list = retData.list || []
          _list.forEach(l => {
            l.url = makePagePath(pageMapper.qaDetail, { id: l.id })
          })
          this.setState({
            list_1: _list,
            pagination_1: {
              ...pagination_1,
              pageCount: retData.pagination.pageCount
            }
          })
        }
      })
      .finally(() => {
        this.hideListLoading()
      })
  }
  handlePageChange_1 = (page: number) => {
    const _pagination = cloneDeep(this.state.pagination_1)
    _pagination.page = page
    this.setState(
      {
        pagination_1: _pagination
      },
      () => {
        this.searchData_1(this.extData.keyword)
      }
    )
  }
  /** 列表 */
  renderList_0 = () => {
    const list = this.state.list_0
    const len = list.length
    return (
      <View className="mt-20px bg-hex-fff px-30px pt-24px pb-68px">
        <View className="flex flex-col">
          {/* item for loop */}
          {list.length > 0 ? (
            list.map((l, index) => {
              return (
                <View
                  key={l.id}
                  className={clsx({
                    "mb-48px": index !== len - 1
                  })}
                >
                  <GpMustReadItem mustReadItem={l} />
                </View>
              )
            })
          ) : (
            <GpEmpty />
          )}
        </View>
      </View>
    )
  }
  /** 快捷导航 */
  renderJumpNavs = () => {
    return (
      <View className="mt-20px">
        <GpJumpNavs />
      </View>
    )
  }
  handleTabChange = (filter: IFilter) => {
    this.setState(
      {
        curFilter: filter.value
      },
      () => {
        this.searchData(this.extData.keyword)
      }
    )
  }
  renderDynamic() {
    const pagination = this.state.pagination_0
    return (
      <View>
        {/* 列表 */}
        {this.renderList_0()}
        {/* 分液器 */}
        <GpPagination
          onChange={this.handlePageChange_0}
          pagination={pagination}
          className="mt-20px"
        />
      </View>
    )
  }
  renderTrainGuide = () => {
    const pagination = this.state.pagination_2
    return (
      <View>
        {/* 列表 */}
        {this.renderList_2()}
        {/* 分液器 */}
        <GpPagination
          onChange={this.handlePageChange_2}
          pagination={pagination}
          className="mt-20px"
        />
      </View>
    )
  }
  /** 列表 */
  renderList_1 = () => {
    const list = this.state.list_1
    return (
      <View className="mt-20px bg-hex-fff px-30px pt-10px pb-39px">
        <View className="">
          {/* item for loop */}
          {list.length > 0 ? (
            list.map(l => (
              <GpQAItem
                key={l.id}
                title={l.title}
                answer={l.answerUser}
                content={l.answerContent}
                navigationLink={l.url}
              />
            ))
          ) : (
            <GpEmpty />
          )}
        </View>
      </View>
    )
  }
  renderQA = () => {
    const pagination = this.state.pagination_1
    return (
      <View>
        {/* 列表 */}
        {this.renderList_1()}
        {/* 分液器 */}
        <GpPagination
          onChange={this.handlePageChange_1}
          pagination={pagination}
          className="mt-20px"
        />
      </View>
    )
  }
  renderStrategy = () => {
    const pagination = this.state.pagination_3
    return (
      <View>
        {/* 列表 */}
        {this.renderList_3()}
        {/* 分液器 */}
        <GpPagination
          onChange={this.handlePageChange_3}
          pagination={pagination}
          className="mt-20px"
        />
      </View>
    )
  }
  renderMain = () => {
    const { curFilter, pending } = this.state
    if (pending) {
      return (
        <View className="bg-hex-fff mt-20px h-300px flex justify-center">
          <Loading type="spinner" className={styles["list-loading"]} />
        </View>
      )
    }
    if (curFilter === 0) {
      return this.renderDynamic()
    } else if (curFilter === 1) {
      return this.renderQA()
    } else if (curFilter === 2) {
      return this.renderTrainGuide()
    } else if (curFilter === 3) {
      return this.renderStrategy()
    }
  }
  searchData = (keyword?: string) => {
    const { curFilter } = this.state
    if (curFilter === 0) {
      this.searchData_0(keyword)
    } else if (curFilter === 1) {
      this.searchData_1(keyword)
    } else if (curFilter === 2) {
      this.searchData_2(keyword)
    } else if (curFilter === 3) {
      this.searchData_3(keyword)
    }
  }
  handleSearchChange = (keyword: string) => {
    this.extData.keyword = keyword
  }
  render(): React.ReactNode {
    const { curFilter } = this.state
    return (
      <GpContainer>
        <View>
          {/* 头部 */}
          <GpTopHeader
            curFilter={curFilter}
            onSearch={this.searchData}
            onTabChange={this.handleTabChange}
            onChange={this.handleSearchChange}
          />
          {this.renderMain()}
          {/* 快捷导航 */}
          {this.renderJumpNavs()}
          {/* 当前位置 */}
          <GpCurrentPort ports={ports} />
        </View>
        {/* 底部导航 */}
        <GpTabbar />
      </GpContainer>
    )
  }
}
export default Dynamic
